import React from 'react'
import Logo from '@/component/logo/logo'
import { List, InputItem, Radio, WingBlank, Button, WhiteSpace } from 'antd-mobile'
import { connect } from 'react-redux'
import { register } from '@/redux/user.redux'
import { Redirect } from 'react-router-dom'

@connect(
    state => state.user, {
        register
    })

class Register extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            user: '',
            pwd: '',
            repeatpwd: '',
            type: 'genius'
        }

        this.handleRegister = this.handleRegister.bind(this)
    }

    handleChange(key, val) {
        this.setState({
            [key]: val
        })
    }

    handleRegister() {
        this.props.register(this.state)
    }

    render() {
        const RadioItem = Radio.RadioItem

        return (
            <div>
                {this.props.redirectTo ? <Redirect to={this.props.redirectTo} /> : null}
                <Logo />
                <WingBlank>
                    <List>
                        {this.props.msg ? <p className='error-msg'>{this.props.msg}</p> : null}
                        <WhiteSpace />
                        <InputItem onChange = {v => this.handleChange('user', v)}>账号</InputItem>
                        <WhiteSpace />
                        <InputItem type="password" onChange={v => this.handleChange('pwd', v)}>密码</InputItem>
                        <WhiteSpace />
                        <InputItem type="password" onChange={v => this.handleChange('repeatpwd', v)}>确认密码</InputItem>
                        <WhiteSpace />
                        <RadioItem checked = {this.state.type === 'genius'} onChange={() => this.handleChange('type', 'genius')}>实习生</RadioItem>
                        <RadioItem checked = {this.state.type === 'boss'} onChange={() => this.handleChange('type', 'boss')}>Boss</RadioItem>
                        <WhiteSpace />
                        <Button type='primary' onClick={this.handleRegister}>注册</Button>
                    </List>
                </WingBlank>
              </div>
        )
    }
}

export default Register